<template>
  <div>
    <div class="left">
      <ButtonGroup vertical>
        <Button
          :type="toolButtonState.pin"
          size="large"
          icon="md-pin"
          title="热力点"
          @click="requestDrawPin"
        ></Button>
        <Button
          :type="toolButtonState.rect"
          size="large"
          icon="md-expand"
          title="热力区域"
          @click="requestDrawRect"
        ></Button>
        <Divider />
        <Button
          type="text"
          size="large"
          icon="md-archive"
          title="导出JSON文件"
          @click="exportJSON"
        ></Button>
      </ButtonGroup>
    </div>
    <div class="right">
      <keep-alive>
        <component
          :is="formComponentName"
          v-show="showForm"
          :excel-data="transport"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import config from "@/config/global";
import { busEventEmit, busEventHandle } from "@/teleport/bus";
import jsonDownloader from "@/libs/exportJSON";

export default {
  name: "",
  data() {
    return {
      showForm: false,
      formComponentName: null,
      transport:null,
      formData: {
        rect:{
          id:null,
          area:null
        },
        pin:{
          id:null,
          coord:null,
          value:0
        }
      },
      toolButtonState: {
        pin: "text",
        rect: "text",
      },
      result: [],
    };
  },
  components: {
    "k-heat-pin": () => import("@/components/heat/HeatPin"),
    "k-heat-rect": () => import("@/components/heat/HeatRect")
  },
  methods: {
    requestDrawPin() {
      if (this.toolButtonState.pin === "text") {
        this.toolButtonState.pin = "primary";
        this.toolButtonState.rect = "text";
        busEventEmit("heatmap-pin-draw-request"); //To AMap
      } else {
        this.toolButtonState.pin = "text";
        busEventEmit("heatmap-pin-draw-cancel");
      }
    },
    requestDrawRect() {
      if (this.toolButtonState.rect === "text") {
        this.toolButtonState.rect = "primary";
        this.toolButtonState.pin = "text";
        busEventEmit("heatmap-rect-draw-request"); //To AMap
        this.$Message.warning({
          background: true,
          duration: 0,
          content:
            "请依照左上角、右上角、右下角、左下角的顺时针顺序，依次勾勒出矩形，顺序不能错",
          closable: true,
        });
      } else {
        this.toolButtonState.rect = "text";
        busEventEmit("heatmap-rect-draw-cancel");
      }
    },
    listenDrawnEvent() {
      const $this = this;
      busEventHandle("rect-drawn", (msg) => {
        debugger
        $this.formComponentName = "k-heat-rect";
        $this.transport = {
          id:msg.id,
          area:msg.area
        }
        $this.showForm = true;
      });
      busEventHandle("pin-drawn", (v) => {
        $this.formComponentName = "k-heat-pin";
        $this.transport = {
          id:v.id,
          coord:v.coord
        }
        $this.showForm = true;
      });
    },
    listenHeatmapRectEditEvent() {
      const $this = this;
      busEventHandle("rect-edit", (msg) => {
        let result = store.heatmapHistory.find((e) => {
          return e.getExtData().id === msg.id;
        });
        result.setExtData(msg);
        busEventEmit("update-form-data", result.getExtData());
      });
    },
    listenHeatmapPinEditEvent() {
      const $this = this;
      busEventHandle("pin-edit", (msg) => {
        let result = store.heatmapHistory.find((e) => {
          return e.getExtData().id === msg.id;
        });
        $this.showForm = true;
        busEventEmit("update-form-data", result.getExtData());
      });
    },
    exportJSON() {
      let heatmap_parent = store.heatmapHistory.filter((e) => {
        return e.CLASS_NAME === "AMap.Polygon";
      })[0].getExtData();
      heatmap_parent.points = new Array();
      let heatmap_nodes = store.heatmapHistory.filter(e=>{
        return e.CLASS_NAME === 'AMap.Circle';
      });
      heatmap_nodes.forEach(o=>{
        heatmap_parent.points.push({
          coord:o.getExtData().coord,
          value:o.getExtData().value
        }) 
      });
      debugger
      jsonDownloader(heatmap_parent, "heatmapp-list.json");
    },
  },
  created() {
    this.listenDrawnEvent();
    this.listenHeatmapRectEditEvent();
    this.listenHeatmapPinEditEvent();
  },
};
</script>

<style scoped>
</style>